<template>
	<div v-loading="loading">
		<div class="title1">
			<div>
				<span class="h1">基础管理</span>
				<span class="h2">项目管理</span>
			</div>
		</div>
		<div class="con">
			<div>
				<el-button type="primary" @click="newPro()">+ 新建</el-button>
				<!--<el-select v-model="value" placeholder="请选择">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>-->
				<div style="width:240px;float:right;position: relative;">
					<el-input v-model="input" placeholder="请输入..."></el-input>
					<i class="el-icon-search" @click="lookPro()" style="position: absolute; width:40px;height:36px;right:0;top:0;color:#000;text-align:center;line-height:36px"></i>
				</div>
			</div>
			<div style="margin-top: 10px;overflow: auto;padding-bottom: 100px;">
				<el-table :data="tableData5" style="width: 100%">
					<el-table-column type="expand">
						<template slot-scope="props">
							<el-form>
								 <el-form-item :label="item.ExtendCaption" v-for="item in props.row.Extends" style="width:49%;float: left;" :key="item.ExtendCaption">
									<span v-if="item.ExtendDataType != '4'" >
										{{item.ExtendValue}} 
									</span>
									<span v-else>
										<el-select v-model="item.ExtendValue"  disabled multiple filterable placeholder="请选择" v-if="item.IsMulti">
											<el-option v-for="items in item.ExtendOptions" :key="items.ID" :label="items.CNName" :value="items.ID">
											</el-option>
										</el-select>
										<el-select v-model="item.ExtendValue"   disabled filterable placeholder="请选择" v-else="">
											<el-option v-for="items in item.ExtendOptions" :key="items.ID" :label="items.CNName" :value="items.ID">
											</el-option>
										</el-select>
									</span>
								</el-form-item>
							</el-form>
						</template>
					</el-table-column>
					<el-table-column label="项目名称" prop="PName">
					</el-table-column>
					<el-table-column label="项目地址" prop="PAddress">
					</el-table-column>
					<el-table-column label="项目联系人" prop="P_Man">
					</el-table-column>
					<el-table-column label="联系电话" prop="P_Tel">
					</el-table-column>
					<el-table-column label="项目简介" prop="P_Intro">
						<template slot-scope="scope">
							<div class="info">{{scope.row.P_Intro}}</div>
							<span class="more" @click="ShowInfo(scope.row.P_Intro)">更多</span>
						</template>
					</el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope">
							<el-button size="small" type="primary" @click="amend(scope.row.ID)">编辑</el-button>
							<el-button size="small" type="danger" @click="Delpro(scope.row.ID)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div style="float: right; margin-top: 10px;margin-right: 5px;">
					<el-pagination  :current-page="pageindex" @current-change="handleCurrentChange" layout="prev, pager, next" :total="leng">
					</el-pagination>
				</div>
			</div>
		</div>
		<div class="edit" v-if="dialogVisible">
			<el-dialog title="项目管理" :visible.sync="dialogVisible" size="tiny">
				<el-form ref="form" :model="form" label-width="80px">
					<el-form-item label="项目名称">
						<el-input v-model="form.name"></el-input>
					</el-form-item>
					<el-form-item label="项目地址">
						<el-input v-model="form.addre"></el-input>
					</el-form-item>
					<el-form-item label="联系人">
						<el-input v-model="form.man"></el-input>
					</el-form-item>
					<el-form-item label="联系电话">
						<el-input v-model="form.tel"></el-input>
					</el-form-item>
					<el-form-item label="项目简介">
						<el-input v-model="form.info" type="textarea"></el-input>
					</el-form-item>
					<div class="sigma-content">
						<div class="sigma-middle-line">
							<span class="sigma-line-text">自定义属性</span>
						</div>
					</div>
					<el-form-item :label="item.FieldName" v-for="item in Dates" :key="item.FieldName">
						<el-date-picker v-model="item.Value" type="date" placeholder="选择日期" >
						</el-date-picker>
					</el-form-item>
					<!--<el-form-item :label="item.FieldName" v-for="(item,index) in Strs" :key="item.Value">
						<el-input v-model="item.Value"></el-input>
					</el-form-item>-->
					<div v-for="itemff in Strs" class="el-items2"> 
						<label class="lables">{{itemff.FieldCaption}}</label>
						<input class="input exInput" value="">
					</div>
					<el-form-item :label="item.FieldName" v-for="item in numbers" :key="item.Value">
						<el-input-number v-model="item.Value" controls-position="right" @change="handleChange" :min="1" :max="150"></el-input-number>
					</el-form-item>
					<el-form-item :label="itemt.FieldName" v-for="itemt in items" :key="itemt.ValueID">
						<el-select v-model="itemt.Value" clearable filterable multiple placeholder="请选择" v-if="itemt.IsMulti">
							<el-option v-for="item in itemt.FieldOptions" :key="item.ID" :label="item.CNName" :value="item.ID">
							</el-option>
						</el-select>
						<el-select v-model="itemt.Value" clearable filterable  placeholder="请选择" v-else>
							<el-option v-for="item in itemt.FieldOptions" :key="item.ID" :label="item.CNName" :value="item.ID">
							</el-option>
						</el-select>
					</el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button @click="proCancel()">取 消</el-button>
					<el-button type="primary" @click="addPro()">确 定</el-button>
				</span>
			</el-dialog>
		</div>
		
		<div class="edit" v-if="isShow">
			<el-dialog title="修改项目" :visible.sync="isShow" size="tiny">
				<el-form ref="form" :model="form" label-width="80px">
					<el-form-item label="项目名称">
						<el-input v-model="form.name"></el-input>
					</el-form-item>
					<el-form-item label="项目地址">
						<el-input v-model="form.addre"></el-input>
					</el-form-item>
					<el-form-item label="项目联系人">
						<el-input v-model="form.man"></el-input>
					</el-form-item>
					<el-form-item label="项目联系电话">
						<el-input v-model="form.tel"></el-input>
					</el-form-item>
					<el-form-item label="项目简介">
						<el-input v-model="form.info" type="textarea"></el-input>
					</el-form-item>
					<div class="sigma-content">
						<div class="sigma-middle-line">
							<span class="sigma-line-text">自定义属性</span>
						</div>
					</div>
					<el-form-item :label="item.FieldName" v-for="item in Dates" :key="item.FieldName">
						<el-date-picker v-model="item.Value" type="date" placeholder="选择日期" >
						</el-date-picker>
					</el-form-item>
					<!--<el-form-item :label="item.FieldName" v-for="(item,index) in Strs" :key="item.Value">
						<el-input v-model="item.Value"></el-input>
					</el-form-item>-->
					<div v-for="itemff in Strs" class="el-items2"> 
						<label class="lables">{{itemff.FieldCaption}}</label>
						<input class="input exInput" value="">
					</div>
					<el-form-item :label="item.FieldName" v-for="item in numbers" :key="item.Value">
						<el-input-number v-model="item.Value" controls-position="right" @change="handleChange" :min="1" :max="150"></el-input-number>
					</el-form-item>
					<el-form-item :label="itemt.FieldName" v-for="(itemt,index) in items" :key="itemt.ValueID">
						<el-select v-model="itemt.Value" clearable filterable multiple placeholder="请选择" v-if="itemt.IsMulti">
							<el-option v-for="item in itemt.FieldOptions" :key="item.ID" :label="item.CNName" :value="item.ID">
							</el-option>
						</el-select>
						<el-select v-model="itemt.Value" clearable filterable  placeholder="请选择" v-else>
							<el-option v-for="item in itemt.FieldOptions" :key="item.ID" :label="item.CNName" :value="item.ID">
							</el-option>
						</el-select>
					</el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button @click="proCancel()">取 消</el-button>
					<el-button type="primary" @click="proEdit()">确 定</el-button>
				</span>
			</el-dialog>
		</div>
		<div class="edit" v-if="delpro">
			<el-dialog
			  title="提示"
			  :visible.sync="delpro"
			  width="30%"
			  :before-close="handleClose">
			  <span>删除项目</span>
			  <span slot="footer" class="dialog-footer">
			    <el-button @click="delpro = false">取 消</el-button>
			    <el-button type="primary" @click="proDel()">确 定</el-button>
			  </span>
			</el-dialog>
		</div>
		
		<div v-if="info" class="edit">
			<el-dialog
			  title="项目简介"
			  :visible.sync="info"
			  width="30%"
			  >
			  <span class="neirog">{{value}}</span>
			  <span slot="footer" class="dialog-footer">
			    <el-button @click="info = false">取 消</el-button>
			    <!--<el-button type="primary" @click="dialogVisible = false">确 定</el-button>-->
			  </span>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	import api from '../../kits/api.js';
	export default {
		name: 'project',
		data() {
			return {
				info:false,
				loading:true,
				delpro:false,//删除弹框
				input: "",//搜索值
				options: [],
				value: '',//下拉值
				form: {//表单
					name: '',
					man: '',
					tel: '',
					info: '',
					addre:"",
				},
				showEdit: false, //显示编辑
				currentRow: null,
				dialogVisible: false,
				tableData5: [],//项目列表
				activeName: 'second',
				id: "",//全局id
				datas: [], //存储数据数组
				numbers: [], //数字
				Strs: [], //字符
				Dates: [], //日期
				items: [], //列表
				leng:1,//页码
				CreateDate:"",
				CreateMan:"",
				isShow:false,//修改
				pageindex:0,//页码
			}
		},
		mounted: function() {
			this.prolist()
		},
		methods: {
			handleChange(value) {
			},
			handleClick(tab, event) {
			},
			handleCurrentChange(val) {
				this.pageindex = val;
				this.loading = true;
				var me = this
				me.$axios.post(api.prolist, {
					"Para": "",
					"PageSize": 10,
					"PageIndex": this.pageindex-1,
					"OrderbyString": "PName"
				}).then((res) => {
					if(res.data.isOK) {
						this.loading = false
						this.tableData5 = res.data.data.Data
						this.leng = res.data.data.Items
					} else {
						if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
							this.$router.push({
								path: '/login'
							})
						} else {
							this.loading = false
							this.$message.error(res.data.msg);
						}
					}
				});
			},
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
						this.proCancel()
					})
					.catch(_ => {});
			},
			//显示简介弹框
			ShowInfo(conten){
				this.info = true
				this.value = conten
			},
			//取消
			proCancel(){
				this.form.name="";
				this.form.tel="";
				this.form.man="";
				this.form.info="";
				this.form.addre="";
				this.Strs=[]
				this.numbers=[]
				this.Dates=[]
				this.items=[]
				this.dialogVisible = false
				this.isShow= false
			},
			//获取项目拓展
			extendsbytype() {
				this.loading = true;
				var me = this
				me.$axios.post(api.extendsbytype,{
				      ExtendType: 3,
				      BusinessID:"",
				  }).then((res) => {
					if(res.data.isOK) {
						this.loading = false;
						this.datas = res.data.data
						for(var i = 0; i < res.data.data.length; i++) {
							switch(res.data.data[i].DataType) {
								case 1:
									me.Strs.push(res.data.data[i])
									break;
								case 2:
									me.numbers.push(res.data.data[i])
									break;
								case 3:
									me.Dates.push(res.data.data[i])
									break;
								case 4:
									me.datas[i].Value = JSON.parse(me.datas[i].Value)||[]
									me.items.push(res.data.data[i])
									break;
								default:
							}
						}
					} else {
						if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
							this.$router.push({
								path: '/login'
							})
						} else {
							this.loading = false
							this.$message.error(res.data.msg);
						}
					}
				});
			},
			//搜索
			lookPro(){
				this.loading = true;
				var me = this
				me.$axios.post(api.prolist, {
					"Para": this.input,
					"PageSize": 10,
					"PageIndex": 0,
					"OrderbyString": "PName"
				}).then((res) => {
					if(res.data.isOK) {
						this.loading = false
						this.tableData5 = res.data.data.Data
						this.leng = res.data.data.Items
					} else {
						if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
							this.$router.push({
								path: '/login'
							})
						} else {
							this.loading = false
							this.$message.error(res.data.msg);
						}
					}
				});
			},
			//获取项目列表
			prolist() {
				this.loading = true;
				this.pageindex = 0
				var me = this
				me.$axios.post(api.prolist, {
					"Para": "",
					"PageSize": 10,
					"PageIndex": this.pageindex,
					"OrderbyString": "PName"
				}).then((res) => {
					if(res.data.isOK) {
						this.loading = false
						this.tableData5 = res.data.data.Data
						for(var i=0;i<this.tableData5.length;i++){
							for(var k =0;k<this.tableData5[i].Extends.length;k++){
								if(this.tableData5[i].Extends[k].ExtendDataType==4){
									if(this.tableData5[i].Extends[k].IsMulti){
								   		this.tableData5[i].Extends[k].ExtendValue = JSON.parse(this.tableData5[i].Extends[k].ExtendValue)
								    }else{
								    	this.tableData5[i].Extends[k].ExtendValue = this.tableData5[i].Extends[k].ExtendValue == null ? this.tableData5[i].Extends[k].ExtendValue:parseInt(this.tableData5[i].Extends[k].ExtendValue)
								    }
								}
							}
						}
						this.leng = res.data.data.Items
					} else {
						if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
							this.$router.push({
								path: '/login'
							})
						} else {
							this.loading = false
							this.$message.error(res.data.msg);
						}
					}
				});
			},
			//修改弹框
			amend(id){
				this.proCancel()
				this.loading = true;
				this.id = id
				this.isShow= true
				var me =  this
				//通过id获取模型
				this.$axios.get(api.getmodel + '/' + this.id).then((res) => {
					if(res.data.isOK) {
						this.loading = false
						this.form.name=res.data.data.PName;
						this.form.tel=res.data.data.P_Tel;
						this.form.man=res.data.data.P_Man;
						this.form.info=res.data.data.P_Intro;
						this.form.addre=res.data.data.PAddress;
						this.CreateMan=res.data.data.CreateMan
						this.CreateDate = res.data.data.CreateDate
						this.datas = res.data.data.Extends	
						for(var i = 0; i < this.datas.length; i++) {
							switch(this.datas[i].DataType) {
								case 1:
									me.Strs.push(this.datas[i])
									setTimeout(function(){
										for(var j = 0;j<me.Strs.length;j++){
											$(".input").eq(j).val(me.Strs[j].Value)
										}
									},0)
									break;
								case 2:
									me.numbers.push(this.datas[i])
									break;
								case 3:
									me.Dates.push(this.datas[i])
									break;
								case 4:
									me.datas[i].Value = JSON.parse(me.datas[i].Value)||[]
									me.items.push(this.datas[i])
									break;
								default:
							}
						}
					} else {
						if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
							this.$router.push({
								path: '/login'
							})
						} else {
							this.loading = false
							this.$message.error(res.data.msg);
						}
					}
				})
			},			
			//修改项目
			proEdit() {
				for(var i = 0;i<this.Strs.length;i++){
					this.Strs[i].Value = $(".input").eq(i).val()
				}
				this.loading = false
				var me = this
				me.$axios.post(api.proEdit, {
					"Extends": this.datas,
					"ID": this.id,
					"PName": this.form.name,
					"PAddress": this.form.addre,
					"P_Man": this.form.man,
					"P_Tel": this.form.tel,
					"P_Intro": this.form.info,
					"CreateMan": this.CreateMan,
					"CreateDate": this.CreateDate
				}).then((res) => {
					if(res.data.isOK) {
						this.loading = true
						this.prolist() 
						this.proCancel()
					} else {
						if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
							this.$router.push({
								path: '/login'
							})
						} else {
							this.loading = false
							this.$message.error(res.data.msg);
						}
					}
				});
			},
			//删除弹框
			Delpro(id){
				this.id = id;
				this.delpro = true
			},
			//删除项目
			proDel() {
				this.loading=true
				var me = this
				me.$axios.get(api.proDel + '/' + this.id).then((res) => {
					if(res.data.isOK) {
						this.loading=false
						this.prolist() 
						this.delpro = false
					} else {
						if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
							this.$router.push({
								path: '/login'
							})
						} else {
							this.loading = false
							this.$message.error(res.data.msg);
						}
					}
				});
			},
			
			//新建弹框
			newPro() {
				this.proCancel()
				this.Strs=[]
				this.numbers=[]
				this.Dates=[]
				this.items=[]
				this.extendsbytype()	
				this.dialogVisible = true
			},

			//确定添加
			addPro() {
				for(var i = 0;i<this.Strs.length;i++){
					this.Strs[i].Value = $(".input").eq(i).val()
				}
				this.loading=true
				var me = this
				for(var i = 0; i < me.datas.length; i++) {
					switch(this.datas[i].DataType) {
						case 1:
							me.datas[i] = me.Strs[0]
							me.Strs.splice(0, 1)
							break;
						case 2:
							me.datas[i] = me.numbers[0]
							me.numbers.splice(0, 1)
							break;
						case 3:
							me.datas[i] = me.Dates[0]
							me.Dates.splice(0, 1)
							break;
						case 4:
							me.datas[i] = me.items[0]
							me.items.splice(0, 1)
							break;
						default:
					}
				}
				me.$axios.post(api.proAdd, {
					"Extends": me.datas,
					"ID": "",
					"PName": me.form.name,
					"PAddress": me.form.addre,
					"P_Man": me.form.man,
					"P_Tel": me.form.tel,
					"P_Intro": me.form.info,
					"CreateMan": "",
					"CreateDate": ""
				}).then((res) => {
					if(res.data.isOK) {
						this.loading = false
						this.prolist() 
						this.proCancel()
						this.dialogVisible = false
					} else {
						if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
							this.$router.push({
								path: '/login'
							})
						} else {
							this.loading = false
							this.proCancel()
							this.dialogVisible = false
							this.$message.error(res.data.msg);
						}						
					}
				});
			},
		}
	}
</script>

<style>
	.title1 {
		width: 100%;
		padding: 15px;
		background: #fff;
		border-bottom: 1px solid #dddee1;
	}
	
	.title1 span {
		margin-right: 10px;
	}
	
	.title1 .h1 {
		font-size: 16px;
		font-weight: 600;
	}
	
	.title1 .h2 {
		font-size: 14px;
	}
	
	.con {
		width: 100%;
		margin-top: 10px;
	}
	
	.page {
		float: right;
		margin-top: 20px;
	}
	.sigma-content {
		margin: 15px 0;
		text-align: center;
		background-color: #fff;
	}
	.sigma-middle-line:before {
		content: '';
		display: block;
		height: 1px;
		width: 100%;
		background-color: #999;
		/*颜色需与主题大背景色一致*/
		position: relative;
		top: 10px;
		/*调节线高*/
		left: 0;
	}
	
	.sigma-line-text {
		display: inline-block;
		background: #fff;
		padding: 0 18px 0 18px;
		position: relative;
		font-size: 14px;
		font-weight: 500;
	}
	.el-dialog__body{
		padding-bottom: 0;
	}
	.el-dialog__footer{
		text-align: center;
	}
	.edit{
		position: fixed;
		background: rgba(0,0,0,.5);
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.sel{
		width: 100%;
			background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #bfcbd9;
    box-sizing: border-box;
    color: #1f2d3d;
    font-size: inherit;
    height: 36px;
    line-height: 1;
    outline: 0;
    padding: 3px 10px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
	}
	.exInput{
	background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #bfcbd9;
    box-sizing: border-box;
    color: #1f2d3d;
    font-size: inherit;
    height: 36px;
    line-height: 1;
    outline: 0;
    padding: 3px 10px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    }
    .exInput:focus{
    	border-color:#20a0ff;
    }
    .lables{
		display: inline-block;
		width: 80px;
		text-align: right;
    vertical-align: middle;
    float: left;
    font-size: 14px;
    color: #48576a;
    line-height: 1;
    padding: 11px 12px 11px 0;
    box-sizing: border-box;
	}
	.el-items2{
		line-height: 36px;
		margin-bottom: 22px;
	}
	.el-items2:after{
		display: block;
		clear: both;
		content: "";
		visibility: hidden;
		height: 0
}
	.info{
		box-sizing: border-box;
		white-space: nowrap;
		width:75%;
		height: 40px;
		line-height: 40px;
		text-overflow:ellipsis;
		overflow: hidden;
		float: left;
	}
	.more{
		display: inline-block;
		line-height: 40px;
		float: right;
		cursor: pointer;
		color: #999;
	}
</style>